/**
 *
 *
 * @author TOTORO
 * @date 2021/8/9 15:17
 */
var $nowInputImage = jQuery;
var returnMoneySuccess = true;
$(function(){
    // 更换服务类型 退款退货 事件
    $(".unfold input[type='radio']").click(function () {
        loading();
        setTimeout(v =>{
            $(".loading-box").remove();
            $(".mod-processbar-pc").remove();
            if($(this).val() == 0){
                $(".apply-rootContainer").before(reimburseStep());
            } else{
                $(".apply-rootContainer").before(refundStep());
            }
        }, 500);
    })

    // 点击打开下拉框
    $("#slt").click(function () {
        if($(".options-high-index").css("display") == 'none') {
            $(".options-high-index").slideDown(300);
        } else{
            $(".options-high-index").slideUp(300);
        }
    });
    // 选项点击事件
    $(".options-item").click(function () {
        loading();
        setTimeout(v =>{
            $(".loading-box").remove();
            var text = $(this).children(":first-child").text();
            $(".selected-wrap").children(":first-child").remove();
            $(".selected-wrap .arrow-down").before($("<span><span>"+text+"</span><span class='select-tips'></span></span>"));
            var tipMessage = $(this).attr("data-msg");
            $(".mod-select-child-dom").remove();
            if(tipMessage != ''){
                var $msg = $("<div class='mod-select-child-dom'>\n" +
                    "                                <div id='applyRefundReasonTipsLabel_8' class='mod-label label apply-applyRefundReasonTipsLabel tips-label' style='margin-top: -10px;'>\n" +
                    "                                    <div class='mod-label-inner'>\n" +
                    "                                        <div class='mod-label-tit-wrap'>\n" +
                    "                                            <strong class='mod-label-tit' style='font-size:12px;font-style:inherit;color:#999999;font-weight:normal;'>\n" +
                    "                                            " +tipMessage+
                    "                                            </strong>\n" +
                    "                                    </div></div></div></div>");
                $("#slt").after($msg);
            }
            $("#returnReason").val(text);
        }, 400);
    });

    $(document).on('click', function (e) {
        var e = e || window.event; //浏览器兼容性
        var elem = e.target || e.srcElement;
        while (elem) { //循环判断至跟节点，防止点击的是div子元素
            if (elem.id && elem.id =='slt') {
                return;
            }
            elem = elem.parentNode;
        }
        // $('#test').css('display', 'none'); //点击的不是div或其子元素
        try {
            $(".options-high-index").slideUp(300);
        } catch (err){
            return;
        }
    });

    // 金额事件，输入金额不能大于退款金额，否则弹出消息
    $("#moneyInput").blur(function () {
        loading();
        setTimeout(v=>{
            $(".loading-box").remove();
            $(".errMsg-wrap").hide();
            // 先判断是否为数字
            if(parseFloat($(this).val()).toString() == "NaN"){
                $(".errMsg-wrap").show();
                returnMoneySuccess = false;
                return false;
            }
            // 如果输入的退款金额大于商品购买时候的金额
            if(parseFloat($(this).val()) > parseFloat($(this).attr("data-value"))){
                $(".mod-messagepc-mask").show();
                addMessageDialog("退款金额大于最大退款金额，请修改");
                $("body").css({"overflow":"hidden", "padding-right":"16"});
                returnMoneySuccess = false;
                return false;
            };
            returnMoneySuccess = true;
        }, 300);
    });

    // 关闭消息提示
    $("body").on("click", ".closeIcon, .iNow", function () {
        $(".mod-messagepc-mask").hide();
        $(".messgaeDialog").remove();
        $("body").prop("style", "");
    });

    // 退款说明指定200个字
    $("#returnMessage").keyup(function () {
        $(".remainder").text(200 - parseInt($(this).val().length))
    })


    // 点击上传图片
    $("#uploadImageBtn").click(function () {
        var that = $(this);
        // 生成一个临时的file input
        var $fileInput = $("<input type='file' style='display: none' name='eImages' class='image-input'>");
        $fileInput.click();
        // 如果上传了图片，则生成DOM
        $fileInput.change(function () {
            var file = $(this);
            var $imageLi = $("<li>" +
                "<div class='img'>" +
                "<img src='' style='width: 90px; height: 90px;'/>" +
                "</div>" +
                "<span class='img-desc'>添加说明</span>" +
                "<input type='hidden' name='instruction' value='添加说明'>"+
                "<span class='delete-icon'></span>" +
                "</li>");
            $imageLi.append($fileInput);
            $(".uploader-trigger").before($imageLi);
            Totoro.html5Reader(file, $imageLi.find("img"));
            // 如果图片有十个了！
            if($(".image-input").length == 10){
                that.parent().hide();
            }
        })
    });

    // 点击删除图片
    $(".pic-uploader-wrapper").on("click", ".delete-icon", function () {
        $(this).parent().remove();
        if($(".uploader-trigger").css("display") == 'none'){
            $(".uploader-trigger").show();
        }
    });

    // 点击添加文字描述
    $(".pic-uploader-wrapper").on("click", ".img-desc", function () {
        // 获得当前图片
        var imgPath = $(this).prev().find("img").attr("src");
        $nowInputImage = $(this);
        $("body").css({"overflow":"hidden", "padding-right":"16"});
       var $inputCheckBox = $("                        <div class='upload-img-preview-mask'>\n" +
            "                                <div class='upload-img-preview-wrapper'>\n" +
            "                                    <div class='upload-img-preview-content'>\n" +
            "                                        <div class='upload-preview-img'>\n" +
            "                                            <div class='pfm-img-preview'>\n" +
            "                                                <div class='viewer-container'>\n" +
            "                                                    <div class='viewer-canvas'>\n" +
            "                                                        <img src='"+imgPath+"' style='width: 297px; height: 212.3px; margin-left: 808.5px; margin-top: 176.85px; transform: rotate(0deg) scaleX(1) scaleY(1);'>\n" +
            "                                                    </div>\n" +
            "                                                    <div class='viewer-close'>\n" +
            "                                                    </div>\n" +
            "                                                </div>\n" +
            "                                            </div>\n" +
            "                                        </div>\n" +
            "                                        <div class='img-desc-edit'>\n" +
            "                                            <span class='img-desc-edit-title'></span>\n" +
            "                                            <textarea class='img-desc-edit-area' rows='4' maxlength='50' placeholder='请输入凭证说明'>"+($(this).text()!='添加说明'?$(this).text():'')+"</textarea>\n" +
            "                                            <span class='remainder'>50</span>\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>");
       $("#uipmAfter").before($inputCheckBox);
    });

    // 关闭文字描述大面板
    $("body").on("click", ".viewer-close", function () {
        // 获得输入的文字，渲染在图片描述上
        var text = $(".img-desc-edit-area").val();
        $nowInputImage.text(text);
        $nowInputImage.next().val(text);
        $(".upload-img-preview-mask").remove();
        $("body").prop("style", "");
    })

    $("body").on("click", ".viewer-container", function () {
        $(".viewer-close").click();
    });

    // 表单提交事件，做好判断
    $("#addReturn").submit(function () {
        // 如果金额不正确，如果未选择原因，如果未选择服务类型 以下操作倒着
        var typeChekcedLength = $(".unfold input:checked").length;
        if(typeChekcedLength < 1){
            addMessageDialog("请选择售后服务类型！");
            return false;
        }
        var reasonVal = $("#returnReason").val();
        if(reasonVal=='' || reasonVal == null){
            addMessageDialog("请选择您售后的原因！");
            return false;
        }

        if(!returnMoneySuccess){
            addMessageDialog("请填写正确的金额！");
            return false;
        }

        // 提交表单
    })

});


function addMessageDialog(text){
    var $tipDialog =  $("<div class='messgaeDialog'>" +
        "<div>" +
        "<div class='mod-messagepc'>" +
        "<div class='content max-width'>" +
        "<i class='closeIcon iconfont icon-close'></i>" +
        "<p1 class='title'>" +
        "</p1>" +
        "<span class='msg'>"+text+"</span>" +
        "<div class='btn-placeholder '></div>" +
        "<div class='btn-area left'>" +
        "<div class='button-item highlight iNow' style='cursor: pointer'>" +
        "<span>确定</span>" +
        "</div></div></div></div>" +
        "<div class='mod-messagepc-mask'></div></div></div>").appendTo("body");
}

function loading() {
    var $loading = $("<div class='loading-box'>" +
        "<div class='mod-loading-layer show'>" +
        "<div class='layer'></div>" +
        "<div class='mui-loading-img mui-loading-play'></div></div></div>");
    $("body").append($loading);
}

function refundStep(){
    return $("<div id='processBarContainer_20' class='mod-processbar-pc'><div style='width:25%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_20.$0'><div class='step-arrow step-0 doing' data-reactid='.0.$root_1.1:$processBarContainer_20.$0.0'></div><div class='step-cell-doing' data-reactid='.0.$root_1.1:$processBarContainer_20.$0.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_20.$0.1.0'>1</span><span data-reactid='.0.$root_1.1:$processBarContainer_20.$0.1.1'>买家申请退货退款</span></div></div><div style='width:25%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_20.$1'><img src='//img.alicdn.com/tps/TB15buINpXXXXaGXpXXXXXXXXXX-63-114.png' class='step-arrow ' data-reactid='.0.$root_1.1:$processBarContainer_20.$1.0'><div class='step-cell-todo' data-reactid='.0.$root_1.1:$processBarContainer_20.$1.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_20.$1.1.0'>2</span><span data-reactid='.0.$root_1.1:$processBarContainer_20.$1.1.1'>卖家处理退货申请</span></div></div><div style='width:25%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_20.$2'><img src='//img.alicdn.com/tps/TB1CuunNpXXXXaZXVXXXXXXXXXX-63-114.png' class='step-arrow ' data-reactid='.0.$root_1.1:$processBarContainer_20.$2.0'><div class='step-cell-todo' data-reactid='.0.$root_1.1:$processBarContainer_20.$2.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_20.$2.1.0'>3</span><span data-reactid='.0.$root_1.1:$processBarContainer_20.$2.1.1'>买家退货</span></div></div><div style='width:25%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_20.$3'><img src='//img.alicdn.com/tps/TB1CuunNpXXXXaZXVXXXXXXXXXX-63-114.png' class='step-arrow ' data-reactid='.0.$root_1.1:$processBarContainer_20.$3.0'><div class='step-cell-todo' data-reactid='.0.$root_1.1:$processBarContainer_20.$3.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_20.$3.1.0'>4</span><span data-reactid='.0.$root_1.1:$processBarContainer_20.$3.1.1'>退款完毕</span></div></div></div>")
}

function reimburseStep() {
    return $("<div id='processBarContainer_18' class='mod-processbar-pc' data-reactid='.0.$root_1.1:$processBarContainer_18'><div style='width:33.33333333333333%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_18.$0'><div class='step-arrow step-0 doing' data-reactid='.0.$root_1.1:$processBarContainer_18.$0.0'></div><div class='step-cell-doing' data-reactid='.0.$root_1.1:$processBarContainer_18.$0.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_18.$0.1.0'>1</span><span data-reactid='.0.$root_1.1:$processBarContainer_18.$0.1.1'>买家申请仅退款</span></div></div><div style='width:33.33333333333333%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_18.$1'><img src='//img.alicdn.com/tps/TB15buINpXXXXaGXpXXXXXXXXXX-63-114.png' class='step-arrow ' data-reactid='.0.$root_1.1:$processBarContainer_18.$1.0'><div class='step-cell-todo' data-reactid='.0.$root_1.1:$processBarContainer_18.$1.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_18.$1.1.0'>2</span><span data-reactid='.0.$root_1.1:$processBarContainer_18.$1.1.1'>卖家处理退款申请</span></div></div><div style='width:33.33333333333333%;' class='step-item' data-reactid='.0.$root_1.1:$processBarContainer_18.$2'><img src='//img.alicdn.com/tps/TB1CuunNpXXXXaZXVXXXXXXXXXX-63-114.png' class='step-arrow ' data-reactid='.0.$root_1.1:$processBarContainer_18.$2.0'><div class='step-cell-todo' data-reactid='.0.$root_1.1:$processBarContainer_18.$2.1'><span class='icon' data-reactid='.0.$root_1.1:$processBarContainer_18.$2.1.0'>3</span><span data-reactid='.0.$root_1.1:$processBarContainer_18.$2.1.1'>退款完毕</span></div></div></div>")
}
